<template>
  <div class="home">
    <!-- <h3>{{this.$store.state.count}}</h3> -->
    <!-- <h3>翻倍:{{this.$store.state.count * 2}}</h3> -->
    <!-- <h3>翻倍:{{this.$store.getters.mul}}</h3> -->
    <h1>计数:{{count}}</h1>
    <h1>姓名:{{name}}</h1>
    <h1>翻倍:{{mul}}</h1>
    <button @click="add">++</button>
    <button @click="decr">--</button>
  </div>
</template>

<script>
  import {
    mapState,
    mapGetters
  } from 'vuex'
  export default {
    name: 'HomeView',
    data() {
      return {
        // count: 0
      }
    },
    computed: {
      // testCount() {
      //   return this.$store.state.count
      // },
      // testName() {
      //   return this.$store.state.name
      // },
      //通过mapState生成计算属性，从state中获取数据,(对象方式)
      // ...mapState({testCount:'count',testName:'name' }),
      //通过mapState生成计算属性，从state中获取数据,(数组方式)
      ...mapState(['count', 'name']),
      /* mul() {
        return this.$store.getters.mul
      } */
      //通过mapGetters生成计算属性，从getters中获取数据,(对象方式)
      // ...mapGetters({mul:'mul'})
      //通过mapGetters生成计算属性，从getters中获取数据,(数组方式)
      ...mapGetters(['mul'])
    },
    methods: {
      add() {
        // this.count++
        // this.$store.state.count++
        /*
          参数1:vuex的actions中的函数名称
          参数2:传递的参数
        */
        this.$store.dispatch('jiaA', 2)
      },
      decr() {
        // this.count--
        this.$store.dispatch('jianA', 2)
      }
    },
    mounted() {
      console.log(mapState({
        testCount: 'count',
        testName: 'name'
      }))
    }
  }
</script>
